<template>
    <div class="search-condition">
        <w-search-form :isShowMoreSeach="isShowMoreSeach" @selectChange="selectChange">
            <template v-for="item in formConfig.filter((item) => item.formType === 'slot')" #[item.slotName]>
                <slot :name="item.slotName"></slot>
            </template>
            <div class="btns">
                <el-button type="primary" @click="search" class="search"> 查询 </el-button>
                <el-button plain class="resert" @click="resert"> 重置 </el-button>
                <el-button plain class="collapse" @click="collapse" v-if="formConfig.length > showFormLength && isShowMoreSeach">{{ isCollapse ? "收起条件" : "展开条件" }}</el-button>
                <slot name="another-btn"></slot>
            </div>
        </w-search-form>
    </div>
</template>

<script setup>
import wSearchForm from "./wSearchForm.vue";
import { inject, ref, isRef } from "vue";
import emitter from "@/bus";
import { useChangeColor } from "@/hooks/useChangeColor.js";
const { bgColor, anotherColor } = useChangeColor();
const emit = defineEmits(["collapse", "resert", "search", "selectChange"]);
const formConfig = isRef(inject("formConfig")) ? inject("formConfig", () => ({})).value : inject("formConfig", () => ({}));
const isCollapse = ref(false);
const props = defineProps({
    isShowMoreSeach: {
        type: Boolean,
        default: true
    }
});
const selectChange = (val, name) => {
    emit("selectChange", val, name);
};
const collapse = () => {
    isCollapse.value = !isCollapse.value;
    emit("collapse", isCollapse.value);
};
const resert = () => {
    emit("resert");
};
const showFormLength = ref(getFormLength());
function getFormLength() {
    if (document.body.clientWidth >= 1920) {
        return 3;
    } else if (document.body.clientWidth >= 1200) {
        return 2;
    } else {
        return 1;
    }
}
const search = () => {
    emit("search");
    emitter.emit("search");
};
</script>

<style lang="less" scoped>
.search-condition {
    box-sizing: border-box;
    padding: 20px 24px 0;
    margin-bottom: 16px;
    background-color: v-bind(bgColor);
    // height: 64px;
    .btns {
        display: flex;
        .search {
            background-color: v-bind(anotherColor);
        }
        .resert {
            border: 1px solid v-bind(anotherColor);
            color: v-bind(anotherColor);
            background-color: v-bind(bgColor);
        }
        .collapse {
            padding: 6px 25px;
            background-color: #ecf1f3;
            border: none;
            color: #8c8c8c;
        }
    }
}
</style>
